var Costume = function(data, index, base) {
    
    this.index = index;
    this.base = base;
    this.baseLayerID = data.baseLayerID;
    this.baseLayerMD5 = data.baseLayerMD5;
    this.baseLayer = data.$image ? data.$image : new Image(0, 0);
    this.bitmapResolution = data.bitmapResolution || 1;
    this.scale = 1 / this.bitmapResolution;
    this.costumeName = data.costumeName;
    this.rotationCenterX = data.rotationCenterX;
    this.rotationCenterY = data.rotationCenterY;
    this.textLayer = data.$text;
    //Increases dynamically as needed.
    this.resScale = 1;
		
		//Is this an svg, i.e. does it need to be rescaled for good resolution?
		this.isSvg = this.baseLayerMD5.split('.')[1] === 'svg';
    
    //this.image = document.createElement('canvas');
    //this.context = this.image.getContext('2d');

    this.render();
    this.baseLayer.onload = function() {
      this.render();
    }.bind(this);
    if (this.textLayer) {
      this.textLayer.onload = this.baseLayer.onload;
    }
  };
  addEvents(Costume, 'load');

  Costume.prototype.render = function() {
    this.image = document.createElement('canvas');
    this.context = this.image.getContext('2d');
    
    if (!this.baseLayer.width || this.textLayer && !this.textLayer.width) {
      return;
    }
    this.image.width = this.baseLayer.width*this.resScale;
    this.image.height = this.baseLayer.height*this.resScale;
    
    this.context.imageSmoothingEnabled = false;
    this.context.msImageSmoothingEnabled = false;
    
    this.context.drawImage(this.baseLayer, 0, 0, this.image.width, this.image.height);
    if (this.textLayer) {
		
      this.context.drawImage(this.textLayer, 0, 0, this.image.width, this.image.height);
    }
    if (this.base.isStage && this.index == this.base.currentCostumeIndex) {      
      setTimeout(function() {
        this.base.updateBackdrop();
      }.bind(this));
    }
    
    //console.log('making texture');
    if(this.base.isStage){
      this.image.imgInfo = glMakeTexture(this.base.stage.backdropContext, this.image);
    }
    else{
      this.image.imgInfo = glMakeTexture(this.base.stage.context, this.image);
      this.image.penImgInfo = glMakeTexture(this.base.stage.penContext, this.image);
    }
    this.image.collisionImgInfo = glMakeTexture(this.base.stage.glCollisionContext, this.image);    
    
    //destroy context and canvas after rendering.
    this.context = null;
    this.image.remove();
  };